<template>
  <div class="my">
    <div class="my-header">
      <span><van-icon class="span-setting" name="setting-o" /></span>
      <span><van-icon class="span-chat" name="chat-o" /></span>
    </div>
    <div class="my-user">
      <div class="my-img">
        <img src="../../assets/img/my/my01.jpg" alt="" />
        <span class="my-span">
          <p class="span_p" @click="loginRes">登录与注册</p>
          <p class="span_user">账号管理<span class="user-icon">></span></p>
        </span>
      </div>
    </div>
    <div class="my-vip">
      <div class="vip_box">
        <div class="vip_text">
          <h2>VIP</h2>
          <p>春雨医生</p>
          <span class="my_icon">></span>
        </div>
      </div>
    </div>
    <div class="my-money">
      <div class="money_box">
        <div class="balance">
          <span>0</span>
          <p>账号余额(元)</p>
        </div>
        <div class="concessional">
          <span>0</span>
          <p>优惠券(张)</p>
        </div>
        <div class="coins">
          <span>0</span>
          <p>金币(张)</p>
        </div>
      </div>
    </div>
    <div class="user_order">
        <div class="my_order">
            <h3>我的订单</h3>
            <span>查看全部<b>></b></span>
        </div>
    </div>
    <div class="user_healthy">
       <div class="my_healthy">
            <h3>健康档案</h3>
            <div class="new_thy">
                  <div @click="files">+新建档案</div>
                  <p>请添加健康档案,进行档案管理</p>
            </div>
        </div>
    </div>
    <div class="my-tool">
      <div class="tool_ul">
        <h2>工具与服务</h2>
        <div class="tool_service">
          <dl>
            <dt>
              <a href=""><img src="../../assets/img/my/my02.jpg" alt="" /></a>
            </dt>
            <dd><a href="">我的医生</a></dd>
          </dl>
          <dl>
            <dt>
              <a href=""><img src="../../assets/img/my/my05.jpg" alt="" /></a>
            </dt>
            <dd><a href="">我的设备</a></dd>
          </dl>
          <dl>
            <dt>
              <a href=""><img src="../../assets/img/my/my03.jpg" alt="" /></a>
            </dt>
            <dd><a href="">健康计划</a></dd>
          </dl>
          <dl>
            <dt>
              <a href=""><img src="../../assets/img/my/my04.jpg" alt="" /></a>
            </dt>
            <dd><a href="">健康测评</a></dd>
          </dl>
        </div>
        <div class="tool_serto">
          <dl>
            <dt>
              <a href=""><img src="../../assets/img/my/my06.jpg" alt="" /></a>
            </dt>
            <dd><a href="">姨妈助手</a></dd>
          </dl>
          <dl>
            <dt>
              <a href=""><img src="../../assets/img/my/my09.jpg" alt="" /></a>
            </dt>
            <dd><a href="">我的收藏</a></dd>
          </dl>
          <dl>
            <dt>
              <a href=""><img src="../../assets/img/my/my08.jpg" alt="" /></a>
            </dt>
            <dd><a href="">春雨医生</a></dd>
          </dl>
          <dl>
            <dt>
              <a href=""><img src="../../assets/img/my/my07.jpg" alt="" /></a>
            </dt>
            <dd><a href="">有奖推荐</a></dd>
          </dl>
        </div>
        <div class="about">
          <dl>
            <dt>
              <a href=""><img src="../../assets/img/my/my07.jpg" alt="" /></a>
            </dt>
            <dd><a href="">关于春雨医生</a></dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="blank"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {
       return {}
    },
    methods: {
        loginRes() {
          this.$router.push({ path: '/login' })
     },
     files() {
        this.$router.push({ path: '/healthrecords' })
     }
    }
})
</script>

<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f7f9f8;
}
.my-header {
  width: 100%;
  height: 74px;
  background: #f7f9f8;
  display: flex;
  justify-content: flex-end;
  align-content: space-between;
  .span-setting {
    font-size: 25px;
    margin-top: 28px;
    margin-right: 30px;
  }
  .span-chat {
    font-size: 25px;
    margin-top: 28px;
    margin-right: 10px;
  }
}
.my-user {
  width: 100%;
  height:1.04rem;
  background: #f8faf9;
  .my-img {
    display: flex;
    img {
      width: 1rem;
      height:1rem;
      margin-left: 0.28rem;
    }
    .my-span {
      margin-top:0.12rem;
      margin-left:0.36rem;
      .span_p {
        font-size:0.33rem;
        font-weight: 900;
      }
      .span_user{
        font-size:0.2rem;
        margin-top: 0.1rem;
      }
      .user-icon {
        margin-left: 6px;
      }
    }
  }
}

.my-vip {
  height: 100%;
  height: 0.78rem;
  background-color: #f6f8f7;
  margin-top: 0.52rem;
  .vip_box {
    width: 6.9rem;
    height:0.76rem;
    margin-left:0.3rem;
    background-color: #0ba75e;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius:2rem;
    .vip_text {
      display: flex;
      h2 {
        font-size: 0.3rem;
        margin-left: 12px;
        line-height: 38px;
        color: #ffd887;
      }
      p {
        font-size: 0.2rem;
        margin-left: 6px;
        line-height: 38px;
        color: #ffd887;
      }
      .my_icon {
        line-height: 38px;
        float: right;
        color: #ffd887;
        margin-left: 220px;
      }
    }
  }
}
.my-money {
  height: 1.70rem;
  background-color: #f6f8f7;
  margin-top: 0.2rem;
  .money_box {
    width: 6.92rem;
    height: 1.70rem;
    background-color: white;
    margin-left: 0.28rem;
    border-radius: 0.2rem;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    .balance{
      margin-top: 0.46rem;
      p{
        margin-top: 0.26rem;
      }
    }
     .concessional{
      margin-top: 0.46rem;
      p{
        margin-top: 0.26rem;
      }
    }
     .coins{
      margin-top: 0.46rem;
      p{
        margin-top: 0.26rem;
      }
    }
  }
}
//我的订单
.user_order{
  width: 100%;
  height: 3.2rem;
  margin-top: 0.18rem;
  .my_order{
    width: 6.94rem;
    height: 3.2rem;
    background-color: white;
    margin-left: 0.28rem;
    display: flex;
    justify-content: space-between;
      border-radius: 0.4rem;
    h3{
      font-size: 0.35rem;
      font-weight: 400;
      margin-left: 0.3rem;
      margin-top: 0.3rem;
    }
    span{
      margin-top: 0.3rem;
      margin-right: 0.28rem;
      color: #ccc;
      b{
       margin-left: 0.16rem;
       font-weight: 100;
      }
    }
  }
}
//健康档案
.user_healthy{
  width: 100%;
  height: 3.2rem;
  margin-top: 0.18rem;
  .my_healthy{
    width: 6.94rem;
    height: 3.2rem;
    background-color: white;
    margin-left: 0.28rem;
    border-radius: 0.4rem;
    display:flex;
     h3{
      font-size: 0.35rem;
      font-weight: 400;
      margin-left: 0.3rem;
      margin-top: 0.3rem;
    }
    .new_thy{
        div{
          width: 2.12rem;
          height: 0.64rem;
          background-color:#ebf0f6 ;
          text-align: center;
          line-height: 0.64rem;
          border-radius: 0.4rem;
          margin-top: 1.34rem;
          margin-left: 0.74rem;
          color: #418cd7;
        }
        p{
          margin-top: 0.2rem;
          color: #989898;
        }
      }
  }
}
//工具
.my-tool {
  height:4.82rem;
  background-color: #f6f8f7;
  display: flex;
  margin-top: 0.2rem;
  border-bottom: 0.2rem;
  .tool_ul {
    width: 6.94rem;
    height:4.82rem;
    margin-left: 0.28rem;
    background-color: white;
    border-radius: 0.4rem;
    h2 {
      margin-left: 0.32rem;
      margin-top: 0.38rem;
      font-weight: 500;
    }
    .tool_service {
      height: 0.76rem;
      display: flex;
      margin-top:0.4rem;
      dl {
        width:1rem;
        height: 0.78rem;
        margin-left: 0.62rem;
        dt {
          width: 0.42rem;
          height:0.46rem;
          img {
            width: 100%;
            height: 100%;
            margin-left: 15px;
          }
        }
        dd {
          margin-top: 0.08rem;
          font-size: 0.2rem;
          a {
            color: #777777;
          }
        }
      }
    }
    .tool_serto {
      height:0.76rem;
      display: flex;
      margin-top: 0.4rem;
      dl {
        width:1rem;
        height: 0.78rem;
        margin-left: 0.62rem;
        dt {
          width: 0.42rem;
          height:0.46rem;
          img {
            width: 100%;
            height: 100%;
            margin-left: 15px;
          }
        }
        dd {
          margin-top: 0.08rem;
          font-size: 0.2rem;
          a {
            color: #777777;
          }
        }
      }
    }
    .about {
      height:0.76rem;
      margin-top: 0.4rem;
      dl {
        width:2rem;
        height: 0.78rem;
        margin-left: 0.4rem;
        dt {
          width: 0.42rem;
          height:0.46rem;
          img {
            width: 100%;
            height: 100%;
            margin-left: 0.46rem;
          }
        }
        dd {
          margin-top: 0.08rem;
          font-size: 0.2rem;
          a {
            color: #777777;
          }
        }
      }
    }
  }
}
.blank{
  margin-top: 0.2rem;
}
</style>
